<template>
	<view class="myScrrenMask" v-if="props.showHideen" @click.prevent="clickEvent">
		<view class="MyScrrenFlexd" @click.stop>
			<view class="screenTitle">
				按时间选择
			</view>
			<!-- 日期范围 -->
			<uni-datetime-picker v-model="range" type="daterange" />
			<view class="screenTitle">
				按类型选择
			</view>
			<view class="flexBox">
				<view :class="index==crtTypeIndex?'itemCrtStyle':'itemStyle'" v-for="(item,index) in screentype"
					:key="index" @click.stop="itemTypeClick(index,item)">
					{{item.label}}
				</view>
			</view>
			<view class="screenTitle">
				按状态选择
			</view>
			<view class="flexBox">
				<view :class="index==crtStateIndex?'itemCrtStyle':'itemStyle'" v-for="(item,index) in screenState"
					:key="index" @click.stop="itemStateClick(index,item)">
					{{item.label}}
				</view>
			</view>
			<!-- 重置和确定 -->
			<view class="closeOrConfirm">
				<view class="itemStyle closeStyle" @click.stop="resultEvt">重置</view>
				<view class="itemStyle confirmStyle" @click.stop="confirmEvt">确定</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import DropdownDaterange from '@/components/da-dropdown/components/daterange.vue'
	import {
		onHide,
		onLaunch,
		onLoad,
		onShow,
	} from '@dcloudio/uni-app';

	import {
		ref
	} from 'vue';

	// 按类型
	const crtTypeIndex = ref(null)
	const crtTypeValue = ref(0)
	const screentype = ref([{
			value: 1,
			label: '方案预付款'
		},
		{
			value: 2,
			label: '完结款'
		},
	])
	// 按状态
	const crtStateIndex = ref(null)
	const crtStateValue = ref(0)
	const screenState = ref([{
			value: 1,
			label: '未到节点'
		},
		{
			value: 2,
			label: '待打款'
		},
		{
			value: 3,
			label: '已打款'
		}
	])
	//选择的时间范围
	const range = ref([])
	const startTime = ref(0) //开始时间
	const endTime = ref(0) //结束时间


	// 类型选择
	const itemTypeClick = (index, item) => {
		crtTypeIndex.value = index
		crtTypeValue.value = item.value

	}
	// 状态选择
	const itemStateClick = (index, item) => {
		crtStateIndex.value = index
		crtStateValue.value = item.value
	}
	// 重置所有
	const resultEvt = () => {
		range.value = []
		startTime.value = 0
		endTime.value = 0
		crtTypeIndex.value = null
		crtTypeValue.value = 0
		crtStateIndex.value = null
		crtStateValue.value = 0
	}

	// ----------------------------------------------------------------
	// 接收父组件的值
	const props = defineProps({
		showHideen: Boolean
	})


	// 给父组件的方法
	const emit = defineEmits()
	// 关闭弹框
	const clickEvent = () => {
		emit('func', false)
	}
	// 传递筛选参数 	// 确定选择
	const confirmEvt = () => {
		// 处理时间
		range.value?.forEach((itemTime, index) => {
			if (index == 0) {
				startTime.value = new Date(new Date(itemTime).toLocaleDateString()).getTime() / 1000
			}
			if (index == 1) {
				endTime.value = new Date(new Date(itemTime).toLocaleDateString()).getTime() / 1000 + 86399
			}
		})
		emit('screenChild', {
			start_time: startTime.value,
			end_time: endTime.value,
			state: crtStateValue.value,
			types: crtTypeValue.value
		})
	}
</script>

<style lang="scss">
	// 修改uni 日期组件样式
	::v-deep .uni-datetime-picker--btn {
		background-color: #007b46;
	}

	::v-deep .uni-calendar-item--multiple .uni-calendar-item--before-checked {
		background-color: #007b46;
	}

	::v-deep .uni-calendar-item--multiple .uni-calendar-item--after-checked {
		background-color: #007b46;
	}

	::v-deep .uni-calendar-item__weeks-box .uni-calendar-item--checked {
		background-color: #007b46;
	}

	.myScrrenMask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);

		.MyScrrenFlexd {
			max-width: 1400rpx; //最大宽度自己可以调整
			margin: 0 auto;
			padding: 20rpx;
			background: #f4f4f4;
			color: #666;
			border-bottom-left-radius: 30rpx;
			border-bottom-right-radius: 30rpx;

			.screenTitle {
				font-size: 34rpx;
				font-weight: bold;
				margin: 20rpx;
			}

			.flexBox {
				display: flex;
				align-items: center;

				.itemStyle {
					width: 150rpx;
					margin-left: 10rpx;
					font-size: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #FFF;
					padding: 15rpx 35rpx;
					border-radius: 40rpx;
					border: 1px solid transparent;
				}

				.itemCrtStyle {
					width: 150rpx;
					margin-left: 10rpx;
					font-size: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 15rpx 35rpx;
					border-radius: 40rpx;
					background: rgba(0, 123, 70, 0.3);
					border: 1px solid #007b46;
				}
			}

			.closeOrConfirm {
				margin-top: 50rpx;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.itemStyle {
					width: 30%;
					padding: 15rpx 40rpx;
					border-radius: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 32rpx;
					font-weight: bold;
				}

				.closeStyle {
					border: 1px solid #333;
				}

				.confirmStyle {
					background: #007b46;
					color: #333;
				}
			}
		}
	}
</style>